<template>
	<view class="video-container">
		<view v-if="url" class="video-box" :class="{'is-float-mode': mode == 'float'}">
			<view class="mask" v-if="mode == 'float'"></view>
			<video :src="url" autoplay page-gesture show-mute-btn show-fullscreen-btn controls class="video"></video>
			<cover-view class="close-icon" @click="close">
				<cover-image src="../static/video-close.png" class="close-icon-image"></cover-image>
			</cover-view>
		</view>
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				url: "",
				showCloseBtn: true,
				mode: 'fullscreen',
			};
		},
		onLoad({
			url
		}) {
			this.url = url;
		},
		mounted() {
			uni.$on('uni-im-playVideo', (url) => {
				this.mode = 'float';
				this.url = url;
				this.showCloseBtn = true;
			});

			// 监听esc按键，关闭视频
			// #ifdef H5
			uniIm.utils.appEvent.onKeyDown(this.onDownEscapeKey, {
				order: 1000,
				match: {
					key: 'Escape',
					altKey: false,
					ctrlKey: false,
					shiftKey: false,
				}
			});
			// #endif
		},
		beforeDestroy() {
			// #ifdef H5
			uniIm.utils.appEvent.offKeyDown(this.onDownEscapeKey);
			// #endif
		},
		methods: {
			onDownEscapeKey(evt) {
				if (this.url) {
					this.close();
				}
				return true;
			},
			close() {
				if (this.mode === 'fullscreen') {
					uni.navigateBack();
				} else {
					this.url = '';
					this.mode = 'fullscreen'; // Reset mode after closing float video
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uni-im/common/baseStyle.scss";

	.video-container {
		position: relative;
		width: 100vw;
		height: 100vh;
	}

	.video-box {
		width: 100%;
		height: 100%;

		.video {
			width: 100%;
			height: 100%;
		}

		.close-icon {
			position: absolute;
			top: 150rpx;
			right: 10px;
			width: 60rpx;
			height: 60rpx;
			padding: 20rpx;
			z-index: 9;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0.8);
			border-radius: 50%;
			/* #ifdef H5 || APP-PLUS */
			cursor: pointer;
			/* #endif */
		}

		.close-icon-image {
			width: 80%;
			height: 80%;
		}

		&.is-float-mode {
			position: fixed;
			top: 10vh;
			left: 10vw;
			width: 80vw !important;
			height: 80vh !important;
			z-index: 9;

			.video {
				width: 100%;
				height: 100%;
			}
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1;
		}
	}
</style>